<template>
  <div id="app">
    <headd :category="category"></headd>
    <div class="wrapper" ref="wrapper">
      <div>
        <div class="findDiv">
          <input
            type="text"
            class="search"
            placeholder="搜索"
            v-model.trim="findContent"
          />
        </div>
        <div class="contain">
          <div v-if="array.length > 0">
            <div class="content" v-for="(item, index) in array" :key="index">
              <div class="block">
                <left
                  :id="item[0]"
                  :master="item[5]"
                  :img="item[4]"
                  :time="item[6]"
                  :address="item[1]"
                  :userid="item[3]"
                  :category="category"
                  :headImg="item[8]"
                  :desc="item[9]"
                ></left>
                <right :avid="item[0]" :userid="item[3]"></right>
              </div>
            </div>
          </div>
          <div class="nullDataTip" v-else>
            <img src="~@/assets/nullTip.png" />
            <button class="nullDataBtn" @click="toPublishIndex">
              <b>去发布活动</b>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from "better-scroll";
import left from "../../components/activityLeft/index.vue";
import right from "../../components/activityRight/index.vue";
import headd from "../../components/pageHeader/index.vue";

// 节流函数
const delay = (function() {
  let timer = 0;
  return function(callback, ms) {
    clearTimeout(timer);
    timer = setTimeout(callback, ms);
  };
})();

export default {
  name: "",
  data() {
    return {
      category: this.$route.query.category,
      array: [],
      findContent: "",
    };
  },
  methods: {
    toPublishIndex() {
      this.$router.push({
        path: "home/publish",
      });
    },
    async fetchData() {
      this.axios
        .get("http://120.78.199.38:9000/getActivity2", {
          params: {
            category: this.category,
            findContent: this.findContent,
          },
        })
        .then((res) => {
          this.array = res.data;
          // console.log(res.data[9]);
        });
    },
  },
  watch: {
    array: function() {
      this.$nextTick(() => {
        this.scroll = new BScroll(this.$refs.wrapper, {
          mouseWheel: true, //开启鼠标滚轮
          disableMouse: false, //启用鼠标拖动
          disableTouch: false, //启用手指触摸
          click: true,
        });
      });
    },
    findContent: function() {
      delay(() => {
        this.fetchData();
      }, 500);
    },
  },
  created() {},
  mounted() {
    //获得数据
    var that = this;
    // console.log("ji" + this.category);
    const loading = this.$loading({
      lock: true,
      text: "Loading.....",
      spinner: "el-icon-loading",
      background: "rgba(0, 0, 0, 0.7)",
    });
    this.axios
      .get("http://120.78.199.38:9000/getActivity", {
        params: {
          category: that.category,
        },
      })
      .then((res) => {
        that.array = res.data;
        loading.close();
        // console.log("数据" + res.data);
      });
  },
  components: {
    left,
    right,
    headd,
  },
};
</script>
<style scoped>
#app {
  height: 100%;
  width: 100%;
}
.content {
  height: 18vh;
  background-color: white;
  width: 92%;
  border-radius: 15px;
  margin: auto;
  padding-bottom: 20px;
  margin-bottom: 10px;
  margin-top: 10px;
  box-shadow: 2px 2px 5px #bbb;
}
.block {
  height: 92%;
  width: 92%;
  position: relative;
  left: 4%;
  top: 4%;
  background-color: white;
  border-radius: 15px;
  display: flex;
}
.wrapper {
  position: relative;
  height: 93%;
  width: 100%;
  background-color: rgb(236, 234, 240);
  overflow: hidden;
}
.contain {
  width: 100%;
}

.nullDataTip {
  width: 50%;
  height: 100%;
  line-height: 100%;
  margin: auto;
  margin-top: 100px;
}
.nullDataBtn {
  width: 60%;
  border-radius: 10px;
  border-style: solid;
}
.nullDataTip {
  width: 50%;
  height: 100%;
  line-height: 100%;
  margin: auto;
  margin-top: 100px;
}
.nullDataBtn {
  width: 60%;
  border-radius: 10px;
  border-style: solid;
  font-size: 15px;
  /* margin-left: 25px; */
  position: relative;
  left: 24px;
  margin-top: 10px;
  color: rgb(151, 148, 148);
}
.findDiv {
  margin-top: 10px;
  text-align: center;
}
.search {
  width: 90vw;
  height: 30px;
  border-radius: 8px;
  margin: auto;
  border-style: solid;
  box-shadow: -1px -1px 1px rgb(172, 172, 172);
}
</style>
